<template>
  <div class="favor-container">
    <van-nav-bar
      fixed
      placeholder
      title="关注"
      left-text="返回"
      right-text="发现用户"
      left-arrow
      @click-left="$router.back()"
      @click-right="searchUser"
    />
    <van-tabs v-model="active" sticky offset-top="46px">
      <van-tab title="推荐">
        <van-pull-refresh
          v-model="recommandRefreshIsLoading"
          @refresh="recommandOnRefresh"
        >
          <van-list
            v-model="recommandLoading"
            :finished="recommandFinished"
            finished-text="没有更多了"
            @load="recommandOnLoad"
          >
            <ul class="recommand-list">
              <li
                class="recommand-item flex align-center"
                v-for="item in recommandList"
                :key="item.uid"
              >
                <img class="avatar" :src="item.avatar" alt="" />
                <div class="body">
                  <div class="nick-name f-16">{{ item.nickName }}</div>
                  <div class="fans-tag">粉丝数{{ item.fansCount }}</div>
                  <div class="desc">{{ item.desc }}</div>
                </div>
                <van-button
                  v-if="!item.favor"
                  @click="setFavor(item)"
                  class="favor-btn"
                  size="mini"
                  icon="plus"
                  plain
                  type="warning"
                  >关注</van-button
                >
                <van-button
                  v-else
                  class="favor-btn"
                  size="mini"
                  icon="plus"
                  plain
                  >已关注</van-button
                >
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      <van-tab title="关注的人">
        <van-pull-refresh
          v-model="favorRefreshIsLoading"
          @refresh="favorOnRefresh"
        >
          <van-list
            v-model="favorLoading"
            :finished="favorFinished"
            finished-text="没有更多了"
            @load="favorOnLoad"
          >
            <ul class="recommand-list">
              <li
                class="recommand-item flex align-center"
                v-for="item in favorList"
                :key="item.uid"
              >
                <img class="avatar" :src="item.avatar" alt="" />
                <div class="body">
                  <div class="nick-name f-16">{{ item.nickName }}</div>
                  <div class="desc">{{ item.desc }}</div>
                </div>
                <van-button
                  class="favor-btn"
                  size="mini"
                  icon="plus"
                  plain
                  @click="optionFavor(item)"
                  >已关注</van-button
                >
              </li>
            </ul>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      cancel-text="取消"
      close-on-click-action
    />
    <van-dialog v-model="groupDialogFlag" title="选择分组" show-cancel-button @confirm="setGroup">
      <div class="content-wrapper">
        <van-checkbox-group v-model="groupResult">
          <van-checkbox
            v-for="item in groupList"
            :name="item.key"
            shape="square"
            :key="item.key"
            >{{ item.name }}</van-checkbox
          >
        </van-checkbox-group>
        <van-button class="mt-10" size="mini" icon="plus">新建分组</van-button>
      </div>
    </van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      //推荐下拉刷新flag
      recommandRefreshIsLoading: false,
      //推荐列表加载flag
      recommandLoading: false,
      //推荐列表全部加载完成flag
      recommandFinished: false,
      recommandPage: 0,
      //推荐列表
      recommandList: [],
      //关注列表
      favorList: [],
      //关注下拉刷新flag
      favorRefreshIsLoading: false,
      //关注当前页
      favorPage: 0,
      //关注列表加载flag
      favorLoading: false,
      //关注列表全部加载完成flag
      favorFinished: false,
      //关注按钮动作面板flag
      show: false,
      //动作面板选项
      actions: [
        { name: "特别关注" },
        { name: "设置分组" },
        { name: "取消关注" },
      ],
      optionFavorItem: {},
      //选择分组对话框flag
      groupDialogFlag: false,
      //选择分组列表结果
      groupResult: [],
      //分组列表
      groupList: [],
    };
  },
  methods: {
    //设置分组
    async setGroup(){
      const res=await this.$axios.post("/v1/favor/setFavorGroup",{
        groups:this.groupResult,
        uid:this.optionFavorItem.uid
      })
      if(res&&res.data.code==200){
        this.$toast.success(res.data.result)
      }
    },
    //操作关注
    optionFavor(item) {
      this.optionFavorItem = item;
      this.show = true;
    },
    //  点击动作面板
    async onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      switch (item.name) {
        case "特别关注":
          break;
        case "设置分组":
          const res = await this.$axios.get("/v1/favor/getFavorGroup",{params:{uid:this.optionFavorItem.uid}});
          if (res && res.data.code == 200) {
            this.groupList = res.data.result.groupList;
            this.groupResult=res.data.result.groupList.filter(item=>item.hasFollowUser).map(item=>item.key)
            this.groupDialogFlag = true;
          }
          break;
        case "取消关注":
          try {
            await this.$dialog.confirm({
              title: "提示",
              message: "确认取消关注？",
            });
            const res = await this.$axios.delete("/v1/favor/cancelFavor", {
              data: {
                uid: this.optionFavorItem.uid,
              },
            });
            if (res && res.data.code == 200) {
              this.$toast.success(res.data.result);
              const index=this.favorList.findIndex(item=>item.uid==this.optionFavorItem.uid)
              if(index!=-1){
                this.favorList.splice(index,1)
              }
            }
          } catch (error) {}

          break;
      }
    },
    //关注
    async setFavor(item) {
      const res = await this.$axios.post("/v1/favor/favorUser", {
        uid: item.uid,
      });
      if (res && res.data.code == 200) {
        this.$toast.success(res.data.result);
        this.$set(item, "favor", true);
      }
    },
    //推荐列表加载
    async recommandOnLoad() {
      const params = {
        page: this.recommandPage + 1,
        perPageCount: 10,
      };
      const res = await this.$axios.get("/v1/favor/recommandList", { params });
      if (res && res.data.code == 200) {
        if (this.recommandRefreshIsLoading) {
          this.recommandList = [];
          this.recommandRefreshIsLoading = false;
        }
        this.recommandList = [...this.recommandList, ...res.data.result.list];
        this.recommandPage = res.data.result.currentPage;
        this.recommandLoading = false;
        if (res.data.result.list.length < 10) {
          this.recommandFinished = true;
        }
      }
    },
    //推荐下拉刷新回调
    recommandOnRefresh() {
      setTimeout(() => {
        this.recommandFinished = false;
        this.recommandPage = 0;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.recommandLoading = true;
        this.recommandOnLoad();
      }, 1000);
    },
    //关注下拉刷新回调
    favorOnRefresh() {
      setTimeout(() => {
        this.favorFinished = false;
        this.favorPage = 0;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.favorLoading = true;
        this.favorOnLoad();
      }, 1000);
    },
    //关注列表加载
    async favorOnLoad() {
      const params = {
        page: this.favorPage + 1,
        perPageCount: 10,
      };
      const res = await this.$axios.get("/v1/favor/favorList", { params });
      if (res && res.data.code == 200) {
        if (this.favorRefreshIsLoading) {
          this.favorList = [];
          this.favorRefreshIsLoading = false;
        }
        this.favorList = [...this.favorList, ...res.data.result.list];
        this.favorPage = res.data.result.currentPage;
        this.favorLoading = false;
        if (res.data.result.list.length < 10) {
          this.favorFinished = true;
        }
      }
    },
    //发现用户
    searchUser() {
      this.$router.push("/");
    },
  },
};
</script>

<style lang="scss" scoped>
.favor-container ::v-deep .van-checkbox{
  margin-bottom: 10px;
}
.favor-container {
  .recommand-list {
    min-height: 300px;
  }
  .recommand-item {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    .avatar {
      margin-right: 10px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    .body {
      margin-right: 10px;
      flex: 1;
      .fans-tag {
        display: inline-block;
        margin-top: 10px;
        font-size: 12px;
        padding: 2px 5px;
        background: #eee;
      }
      .desc {
        align-self: flex-start;
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
  .content-wrapper {
    padding: 30px 50px 0;
    height: 100px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .mt-10{
    margin-top: 10px;
  }
}
</style>